<!--
    This page contains the form "Windows area"
    with a Javascript function that can enable the year of renovation.
-->

<script type="text/javascript">
    function visibleNumber(){
        if(document.getElementById('roofLightTrue').checked){
            document.getElementById('roofLightNumber').removeAttribute('readonly');
        }
        if(document.getElementById('roofLightFalse').checked){
            document.getElementById('roofLightNumber').setAttribute('readonly', 'readonly');
            document.getElementById('roofLightNumber').value = "";
        }
    }
</script>

 <p id="subtitle"><?php echo TXT_TAB_WINDOWS; ?></p>
 <div id="blindsDiv">
    <div style="background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">
   
    <table id="blindsTab">
        <tr>
            <td>
                <span id="blindsSpan"><?php echo TXT_ROOF_LIGHT; ?></span>
                <img id="windowZenithal" src="../images/forms/windowsTypes/windowZenithal.png" alt="Velux" />
            </td>
            <td>
                <input type="radio" id="roofLightFalse" name="roofLight" value="false" onclick="visibleNumber()" checked> <?php echo TXT_NO; ?>
                <input type="radio" id="roofLightTrue" name="roofLight" value="true" onclick="visibleNumber()"> <?php echo TXT_YES; ?> 
                - <?php echo TXT_NUMBER_ROOF_LIGHT; ?> ? <input type="number" id="roofLightNumber" name="roofLightNumber" readonly />
            </td>
        </tr>
        <tr>
            <td>
                <span id="blindsSpan"><?php echo TXT_BLINDS; ?></span>
            </td>
            <td>
                <input type="radio" name="blinds" value="false" checked> <?php echo TXT_NO; ?>
                <input type="radio" name="blinds" value="true"> <?php echo TXT_YES; ?>
            </td>
        </tr>
    </table>
    </div>
</div>
<div id="areaWindowDiv">
     <p id="subtitle"><?php echo TXT_AREA; ?></p>
    
    <div style="background-color: #f2f2f2; margin : 10px; padding : 20px; border-radius: 10px; Box-shadow: 2px 2px 8px 1px rgba(0,0,0,0.4);">
   
    <table id="windowAreaTab" style="padding-top: 5px;">
        <tr>
            <th><?php echo TXT_NORTH; ?></th>
            <th><?php echo TXT_EAST; ?></th>
            <th><?php echo TXT_SOUTH; ?></th>
            <th><?php echo TXT_WEST; ?></th>
<!--            <th></th>-->
        </tr>
        <tr>
            <td><input type="number" name="areaWindowNorth" id="areaWindowNorth" readonly /> %</td>
            <td><input type="number" name="areaWindowEast" id="areaWindowEast" readonly /> %</td>
            <td><input type="number" name="areaWindowSouth" id="areaWindowSouth" readonly /> %</td>
            <td><input type="number" name="areaWindowWest" id="areaWindowWest" readonly /> %</td>
<!--            <td><input id="modifAreaW" type="checkbox" onclick="modifyAreaW();"/> <?php //echo TXT_DIMENSION_EDIT; ?></td>-->
        </tr>
        <tr>
            <td><input type="number" name="measureWindowNorth" id="measureWindowNorth" readonly /> m2</td>
            <td><input type="number" name="measureWindowEast" id="measureWindowEast" readonly /> m2</td>
            <td><input type="number" name="measureWindowSouth" id="measureWindowSouth" readonly /> m2</td>
            <td><input type="number" name="measureWindowWest" id="measureWindowWest" readonly /> m2</td>
<!--            <td><input id="modifAreaWM" type="checkbox" onclick="modifyAreaWM();"/> <?php //echo TXT_DIMENSION_EDIT; ?></td>-->
        </tr>
    </table>

    <script>
        function modifyAreaW(){        
            if(document.getElementById('modifAreaW').checked){
                document.getElementById("areaWindowNorth").removeAttribute('readonly');
                document.getElementById("areaWindowEast").removeAttribute('readonly');
                document.getElementById("areaWindowSouth").removeAttribute('readonly');
                document.getElementById("areaWindowWest").removeAttribute('readonly');
            }
            else{
                document.getElementById("areaWindowNorth").setAttribute('readonly', 'readonly');
                document.getElementById("areaWindowEast").setAttribute('readonly', 'readonly');
                document.getElementById("areaWindowSouth").setAttribute('readonly', 'readonly');
                document.getElementById("areaWindowWest").setAttribute('readonly', 'readonly');
            }
        }
        function modifyAreaWM(){        
            if(document.getElementById('modifAreaWM').checked){
                document.getElementById("measureWindowNorth").removeAttribute('readonly');
                document.getElementById("measureWindowEst").removeAttribute('readonly');
                document.getElementById("measureWindowSouth").removeAttribute('readonly');
                document.getElementById("measureWindowWest").removeAttribute('readonly');
            }
            else{
                document.getElementById("measureWindowNorth").setAttribute('readonly', 'readonly');
                document.getElementById("measureWindowEst").setAttribute('readonly', 'readonly');
                document.getElementById("measureWindowSouth").setAttribute('readonly', 'readonly');
                document.getElementById("measureWindowWest").setAttribute('readonly', 'readonly');
            }
        }
    </script>
    </div>
</div>